<template>
    <div class="vt-cart-item flx-lm" :class="header?'vt-cart-header' : ''">
      <div class="cart-item-check">
        <Checkbox :checked="isChecked" @click-checkbox="onClickCheckbox"/>
      </div>
      <div class="cart-item-content">
        <slot></slot>
      </div>
      <div class="cart-item-num-button" v-if="!header">
        <span @click="onClickMinius" class="minius"> - </span>
        <span class="num"> {{num}} </span>
        <span @click="onClickAdd" class="add"> + </span>
      </div>
    </div>
</template>

<script>
  import Checkbox from '../../checkbox/checkbox'
  export default {
    components: {
      Checkbox
    },
    props: {
      header: [Boolean, Number, String],
      count: {
        type: Number,
        default(){
          return undefined
        }
      },
      isChecked: {
        type: Boolean,
        default(){
          return false
        }
      },
      val: Object,
      maxCount: {
        type: Number,
        default(){
          return undefined
        }
      },
      minCount:  {
        type: Number,
        default(){
          return undefined
        }
      },
    },
    data() {
      return {
        num: this.count === undefined ? 0 : this.count
      }
    },
    methods: {
      onClickMinius(){
        if (this.minCount === undefined){
          if(this.num > 1) {
            this.num --;
            this.val.itemCount = this.num
          }
        }else{
          if (this.num > this.minCount) {
            this.num --;
            this.val.itemCount = this.num
          }
        }
      },
      onClickAdd () {
        if (this.maxCount === undefined){
          this.num ++;
          this.val.itemCount = this.num
        }else{
          if (this.num < this.maxCount) {
            this.num ++;
            this.val.itemCount = this.num
          }
        }
      },
      onClickCheckbox() {
        if (this.header) {
          this.$emit('click-check-all')
        }else{
          this.val.itemIsChecked = !this.val.itemIsChecked
          this.$emit('click-check-item')
        }
      }
    }
  }
</script>

<style scoped lang="stylus">
  @import './index.styl';
</style>
